<template>
  <div class="to-connect">
    <div v-for="fun in list">
      <div v-if="fun.popover">
        <el-popover placement="top" width="200" trigger="click">
          <template #reference>
            <img
              :src="fun.img"
              :width="props.width"
              :height="props.height"
              alt="二维码"
            />
          </template>
          <img :src="fun.popover" :alt="fun.name" />
        </el-popover>
      </div>
      <div v-else>
        <img
          :width="props.width"
          :height="props.height"
          :src="fun.img"
          :alt="fun.name"
          @click="contactClick(fun.name)"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const props = defineProps({
  width: {
    type: String,
    default: "24px",
  },
  height: {
    type: String,
    default: "24px",
  },
});
const microMsg = new URL("../../assets/svg/microMsg.svg", import.meta.url).href;
const qq = new URL("../../assets/svg/qq.svg", import.meta.url).href;
const gitee = new URL("../../assets/svg/gitee.svg", import.meta.url).href;
const github = new URL("../../assets/svg/github.svg", import.meta.url).href;
const msgQrCode = new URL("../../assets/msg_qr_code.webp", import.meta.url).href;
const qqQrCode = new URL("../../assets/qqQrCode.webp", import.meta.url).href;
interface List {
  name: string;
  img: string;
  popover?: any;
}
const showPopover = ref<boolean>(false);
const list: List[] = [
  {
    name: "微信",
    img: microMsg,
    popover: msgQrCode,
  },
  {
    name: "qq",
    img: qq,
    popover: qqQrCode,
  },
  {
    name: "gitee",
    img: gitee,
  },
  {
    name: "github",
    img: github,
  },
];

const contactClick = (contactFun: string) => {
  switch (contactFun) {
    case "微信":
      showPopover.value = !showPopover.value;
      break;
    case "qq":
      window.open("https://www.baidu.com", "_blank");
      break;
    case "gitee":
      window.open("https://gitee.com/jameswong1", "_blank");
      break;
    case "github":
      window.open("https://github.com/MollyJQ", "_blank");
      break;
    default:
      break;
  }
};
</script>
<style lang="scss" scoped>
.to-connect {
  position: relative;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  .j-popover {
    position: absolute;
    top: -230px;
  }
  img {
    margin: 0 8px;
    cursor: pointer;
  }
}
</style>
